<template>
  <div>
    <div class="page-header">
      <div class="left">
        <h3 class="page-title">编目检索</h3>
        <ul class="breadcrumb">
          <li class="breadcrumb-item">
            <router-link to="/admin/home">首页</router-link>
          </li>
          <li class="breadcrumb-item active">编目列表</li>
        </ul>
      </div>
    </div>
    <transition-group
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__fadeIn"
    >
      <el-card key="1">
        <el-form :inline="true">
          <el-form-item label="搜索">
            <el-input v-model="state.itemName" placeholder="请输入书名"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="state.search" clearable placeholder="请选择出版社">
              <el-option
                  v-for="item in state.publish"
                  :key="item.publish"
                  :label="item.publish"
                  :value="item.publish"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="state.sizeS" clearable placeholder="请选择文献尺寸">
              <el-option
                  v-for="item in state.docusize"
                  :key="item.size"
                  :label="item.size"
                  :value="item.size"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="state.languageS" clearable placeholder="请选择文献语种">
              <el-option
                  v-for="item in state.language"
                  :key="item.languages"
                  :label="item.languages"
                  :value="item.languages"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="state.typeS" clearable placeholder="请选择文献类型">
              <el-option
                  v-for="item in state.type"
                  :key="item.docuType"
                  :label="item.docuType"
                  :value="item.docuType"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="table-container" key="1">
          <el-table
              :data="handleSelect()"
              stripe
              style="width: 100%"
          >
            <el-table-column type="expand">
              <template #default="props">
                <el-descriptions title="">
                  <el-descriptions-item label="标题">{{ props.row.name }}</el-descriptions-item>
                  <el-descriptions-item label="作者">{{ props.row.author }}</el-descriptions-item>
                  <el-descriptions-item label="编目人">{{ props.row.cataloger }}</el-descriptions-item>
                  <el-descriptions-item label="编目号">{{ props.row.bkId }}</el-descriptions-item>
                  <el-descriptions-item label="页码">{{ props.row.pages }}</el-descriptions-item>
                  <el-descriptions-item label="价格">{{ props.row.price }}元</el-descriptions-item>
                  <el-descriptions-item label="编目日期">{{ props.row.cataDate }}</el-descriptions-item>
                  <el-descriptions-item label="文献类型">{{ props.row.bkType }}</el-descriptions-item>
                  <el-descriptions-item label="出版社">{{ props.row.publish }}</el-descriptions-item>
                  <el-descriptions-item label="文献尺寸">{{ props.row.size }}</el-descriptions-item>
                  <el-descriptions-item label="文献语种">{{ props.row.language }}</el-descriptions-item>
                </el-descriptions>
              </template>
            </el-table-column>
            <el-table-column
                type="index"
                prop=""
                label=""
                :index="(index)=>{ return (pagination.currentPage-
1)*pagination.pageSize + index + 1 }"
                width="50">
            </el-table-column>

            <el-table-column
                prop="name"
                label="书名"
                width="200">
            </el-table-column>
            <el-table-column
                prop="author"
                label="作者">
            </el-table-column>
            <el-table-column
                prop="publish"
                label="出版社">
            </el-table-column>
            <el-table-column
                prop="size"
                width="150"
                label="文献尺寸(cm)">
            </el-table-column>
            <el-table-column
                prop="bkType"
                label="文献类别">
            </el-table-column>
            <el-table-column
                prop="language"
                label="文献语种">
            </el-table-column>
            <el-table-column
                prop="pages"
                label="页码"
                width="120"
            >
            </el-table-column>
            <el-table-column
                prop="price"
                label="价格"
                width="120"
            >
            </el-table-column>
            <el-table-column
                prop=""
                label="操作"
                align="center"
                width="150">
              <template #default="scope">
                <el-button size="small" plain
                           type="primary"
                           @click="onEdit(scope.$index)">&nbsp;修改
                </el-button>
                <el-popconfirm
                    title="确定删除该数据吗？"
                    @confirm="onDelete(scope.$index)"
                >
                  <template #reference>
                    <el-button size="small" plain
                               type="danger">&nbsp;删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @current-change="handleCurrentChange"
              v-model:current-page="pagination.currentPage"
              v-model:page-size="pagination.pageSize"
              :total="pagination.total"
              layout="total,prev, pager, next">
          </el-pagination>
        </div>
      </el-card>
    </transition-group>
  </div>
</template>
<script setup>
//Vue3.x 组合式API写法
import {reactive, onMounted} from "vue";
import {get} from "@/utils/request"
//使用一个reactive方法让状态作为响应式对象
const state = reactive({
  list: [],
  mymodel: {
    id: '',
    name: "",
    author: "",
    publish: "",
    pages: '',
    price: '',
    cataloger: '',
    cataDate: '',
    bkId: '',
    bkType: '',
    size: '',
    language: '',
    bkAbstract: ''
  },
  dialogAdd: {
    title: '',
    show: false,
    option: ''
  },
  dialogEdit: {
    title: '',
    show: false,
    option: ''
  },
  item: {},
  selectedIndex: -1,
  // 语种
  language: [],
  type: [],
  publish: [],
  search: '',
  itemName: '',
  languageS: '',
  sizeS: '',
  typeS: '',
  docusize: []
})


const initData = async function () {
  state.language = await get('/language')
  state.type = await get('/bktype')
  state.publish = await get('/publish')
  state.docusize = await get('/docusize')
}
initData()
const handleSelect = () => {
  const startIndex = (pagination.currentPage - 1) * pagination.pageSize;
  const endIndex = startIndex + pagination.pageSize;
  const filteredList = state.list.filter(item => {
    if (item.publish.includes(state.search) && item.name.includes(state.itemName) && item.language.includes(state.languageS) && item.size.includes(state.sizeS) && item.bkType.includes(state.typeS)) {
      // 字符串索引有关键字值,返回true
      return item
    }
  })
  pagination.total = filteredList.length;
  return filteredList.slice(startIndex, endIndex)
}
//翻页参数对象
const pagination = reactive({
  currentPage: 1, //当前页(默认第一页)
  pageSize: 12, //每页显示条目个数
  total: state.list.length, //总条目数
})
//生命周期钩子
onMounted(async () => {
  state.list = await get("/bookcata");
  pagination.total = state.list.length;
})
//表格翻页控制方法
const handleCurrentChange = (val) => {
  pagination.currentPage = val;
}
</script>
<style scoped>
.table-container {
  text-align: right;
}
</style>
